<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	1. 引入vue.js
        	2. 创建vue对象
        		el: 指定根element(选择器)
        		data: 初始化数据(页面可以访问)
        	3. 双向数据绑定: v-model
        	4. 显示数据: {{xxx}}
        	5. 理解vue的mvvvm实现
        -->
		<div id="app">
			<input type="text" v-model="username" />
			<p>Hello {{username}}</p>
		</div>

		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			// 创建vue实例
			var vm = new Vue({ // 配置对象
				el: '#app', // element: 选择器
				data: { // 数据(model)
					username: 'atguigu'
				}
			})
		</script>
	</body>
</html>
